<template>
  <a-form ref="formRef" :label-col="{ style: { width: '170px' } }" :wrapper-col="{ span: 24 }">
    <Item v-for="(list, index) in state.fields" :filterList="filterList" :key="index" :idx="index" @handlerDel="handlerDel" />

    <div class="cp color-primary add" v-if="state.fields.length < 10">
      <span @click="push">
        <PlusOutlined />
        新增筛选条件
      </span>
    </div>

    <div class="footer">
      <a-button @click="cancel">取消</a-button>
      <a-button type="primary" @click="sure">确定</a-button>
    </div>
  </a-form>
</template>
<script lang="ts" setup>
  import { ref, Ref, reactive } from "vue"
  import type { FormInstance } from "ant-design-vue"
  import { PlusOutlined } from "@ant-design/icons-vue"
  import Item from "./item.vue"
  import { PAW_PLACEHOLDER } from "@/constant/index"
  //ref
  const formRef = ref<FormInstance>()

  const props = defineProps(["filterList"])
  const handlerDel = (idx: number) => {
    state.fields.splice(idx, 1)
  }

  const state = reactive({
    fields: [{}],
    value1: "",
    value2: "",
  })

  const cancel = () => {
    state.fields = [{}]
  }
  const sure = () => {
    console.log("state", state)
  }

  const push = () => {
    state.fields.push({})
  }
</script>
<style lang="css" scoped>
  .add {
    margin-top: 16px;
  }
  .footer {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    button {
      &:first-child {
        margin-right: 10px;
      }
    }
  }
</style>
